<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： desktop.html
  ~ Date：18-10-11 下午5:16
  ~ Author: guomw
  -->

<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>


    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>
    <!-- Morris -->
    <link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">


    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
          th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}" rel="stylesheet"/>

    <!--openlayers地图css-->
    <link rel="stylesheet" type="text/css" href="../../resource/openLayers/css/ol.css"
          th:href="@{/resource/openLayers/css/ol.css}"/>
    <!--树状图css-->
    <link href="../../resource/hotui/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/plugins/treeview/bootstrap-treeview.css}"/>
    <!--表格相关css-->
    <link href="../../resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css}"/>
    <style>
        .dataTables_wrapper {
            padding-bottom: 0 !important;
        }

        .ol-viewport {
            /*完全透明*/
            /*background-color: rgba(0, 0, 0, 0);*/
            /*完全不透明*/
            /*background-color: rgba(0, 0, 0, 1);*/
        }
    </style>
</head>

<body class="gray-bg" style="height: 100%">
<div style="position: relative;height: 100%">
    <input id="strId" name="strId" minlength="2" type="hidden" class="form-control" th:value="${strId}">
    <input id="strName" name="strName" minlength="2" type="hidden" class="form-control" th:value="${strName}">
    <input id="strUrl" name="strUrl" minlength="2" type="hidden" class="form-control" th:value="${data}">
    <input id="selectNo" name="selectNo" type="hidden">

    <!--树状图-->

    <div id="treeview11" class="test col-sm-3 white-bg"
         style="width:15%;height:100%;position:absolute;top: 0;left: 0;overflow-y: auto;padding: 0 0 0 0">

    </div>
    <!--地图主体-->
    <div style="position: absolute;top :0; right:0;width: 85%;height: 100%;background-color: #fff;">
        <div id="map" class="map table-bordered" style="position:absolute;float:right;height:85%;width: 100%;">
        </div>
        <form class="col-lg-4" action="index_submit" method="get" accept-charset="utf-8" role="form"
              style="max-height:70%; position:absolute;top: 10px;left: 21%;width: 21%;">
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-success" style="display: none">查询</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-success" style=""
                            onclick="addConcealPointHelper.addConcealPoint()">创建房间
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu" style="max-height: 10%">
                    </ul>
                </div>
                <!-- /btn-group -->

            </div>
        </form>
        <!--地图弹框-->
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
    </div>
</div>

<div id="set_resident_modal" class="modal-content-tag">
    <form id="residentModelForm">
        <input id="latitude" name="latitude" type="hidden">
        <input id="longitude" name="longitude" type="hidden">
        <div class="form-group">
            <label class="col-sm-5">房间名称:</label>
            <div class="col-sm-7">
                <input id="roomName" type="text" class="form-control" name="startPoint">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5">定位器编号:</label>
            <div class="col-sm-7">
                <input id="equNo" type="text" class="form-control" name="endPoint">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-5">描述:</label>
            <div class="col-sm-7">
                <input id="describe" type="text" class="form-control" name="nextPoint">
            </div>
        </div>
    </form>
</div>
<!--基础框架js-->

<script src="../../resource/js/jquery.min.js" th:src="@{/resource/js/jquery.min.js?20190316}"></script>
<script src="../../resource/js/bootstrap.min.js" th:src="@{/resource/js/bootstrap.min.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>
<script src="../../resource/hotui/js/plugins/datetimepick/js/moment.min.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/moment.min.js}" ></script>
<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>
<script src="../../resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script src="../../resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js"
        th:src="@{/resource/lib/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.min.js}"></script>

<script src="../../resource/js/switchery.min.js" th:src="@{/resource/js/switchery.min.js}"></script>
<script src="../../resource/js/plugins/validate/jquery.validate.min.js"
        th:src="@{/resource/js/plugins/validate/jquery.validate.min.js}" ></script>
<script src="../../resource/js/plugins/validate/messages_zh.min.js"
        th:src="@{/resource/js/plugins/validate/messages_zh.min.js}"></script>

<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-validate.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-validate.js}"></script>

<!--表格相关js-->
<script src="../../resource/hotui/js/plugins/jeditable/jquery.jeditable.js"
        th:src="@{/resource/hotui/js/plugins/jeditable/jquery.jeditable.js}"></script>
<script src="../../resource/hotui/js/plugins/dataTables/jquery.dataTables.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script src="../../resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
<!--树状图相关js-->
<script src="../../resource/hotui/js/plugins/treeview/bootstrap-treeview.js"
        th:src="@{/resource/hotui/js/plugins/treeview/bootstrap-treeview.js}">
</script>
<!--地图相关js-->
<script src="../../resource/openLayers/js/ol.js" th:src="@{/resource/openLayers/js/ol.js}"></script>
<script src="../../resource/js/map/roomMap.js" th:src="@{/resource/js/map/roomMap.js}"></script>
<script type="text/javascript" th:inline="javascript">
    const mapBase = /*[[@{/map}]]*/ "/map";
    const path = "http://" + document.location.host;
</script>
<script type="text/javascript">
    $(function () {
        var url = encodeURI('[[${data}]]');
        var strId = '[[${strId}]]';
        helper.init(strId, url);
        treeHandler.initTree();

    });
    $(document).ready(function () {
        $(".dataTables-example").dataTable();
    });
    var treeHandler = {
        //展示右边的社区树
        initTree: function () {
            $.ajax({
                url: mapBase + "/structure/tree", //请求路径
                type: "post", //请求方式
                success: function (apiResult) {
                    $("#treeview11").treeview({
                        levels: 99,
                        color: "#708340",
                        data: apiResult.data,
                        onNodeSelected: function (e, o) {
                            if (o.url == "" || o.url == null) {
                                return;
                            }
                            $("#strId").val(o.strId);
                            $("#strName").val(o.text);
                            var url = encodeURI(o.allUrl);
                            $("#strUrl").val(url);
                            helper.init(o.strId, url);
                        }
                    });

                },
                error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });
        },
        addPonit: function (no) {
            var selectNo = $("#selectNo").val();
            if (selectNo != '' && selectNo != null) {
                $("#selectNo").val("");
                //将图片变回鼠标
                var url = encodeURI(path + "/resource/img/a1.jpg");
                document.body.style.cursor = "url(" + url + ") 12 12,default";
                return;
            }
            if ($("#" + no + "_address").text() == $("#strName").val()) {
                alert("设备" + no + "已在该楼层");
                return;
            }
            $("#selectNo").val(no);
            //将鼠标变为图片
            var url = encodeURI(path + "/resource/img/a1.jpg");
            document.body.style.cursor = "url(" + url + ") 12 12,crosshair";
        },

    };

    var setResidentModel = $("#set_resident_modal").modal("新增房间", function () {
        $("#residentModelForm").submit();
    });

    var addConcealPointHelper = {
        addConcealPoint: function () {
            //将鼠标变为图片
            var url = encodeURI(path + "/resource/img/a1.jpg");
            document.body.style.cursor = "url('" + url + "') 12 12,crosshair";
            var key = map.on('click', function (evt) {
                setResidentModel.show(function () {
                    //移除点击事件
                    ol.Observable.unByKey(key);
                    //将鼠标变会原样
                    var url = encodeURI(path + "/resource/img/a1.jpg");
                    document.body.style.cursor = "url(" + url + ") 12 12,default";
                    //保存数据功能
                    $("#residentModelForm").validateCallback(function () {
                        var requestData = {
                            address: $("#strName").val(),
                            structureId: $("#strId").val(),
                            longitude: evt.coordinate[0],
                            latitude: evt.coordinate[1],
                            roomName: $("#roomName").val(),
                            locatorNo: $("#equNo").val(),
                            describe: $("#describe").val()
                        };
                        $.ajax({
                            url: "/resident/save/room", //请求路径
                            type: "post", //请求方式
                            data: requestData, //请求参数
                            success: function (apiResult) {
                                if (apiResult.resultCode == 2000) {
                                    helper.init($("#strId").val(), $(
                                        "#strUrl").val());
                                    jsHelper.showPhop();
                                    //将图片变回鼠标
                                    var url = encodeURI(path +
                                        "/resource/img/a1.jpg");
                                    document.body.style.cursor =
                                        "url(" + url +
                                        ") 12 12,default";
                                    setResidentModel.hide();
                                } else {
                                    hot.tip.error(apiResult.resultMsg);
                                }
                            },
                            error: function () {

                            },
                            dataType: "json" //服务器响应的数据格式
                        });
                    });
                });
            });

        },
        deleteConcealPoint: function (id) {
            //ajax删除隐藏点
            $.ajax({
                url: "/resident/delete/room", //请求路径
                type: "post", //请求方式
                data: {
                    id: id
                }, //请求参数
                success: function (apiResult) {
                    if (apiResult.resultCode === 2000) {
                        var element = popup.getElement();
                        $(element).popover('destroy');
                        helper.init($("#strId").val(), $("#strUrl").val());
                    }else{
                        hot.tip.error("删除失败--" + apiResult.resultMsg);
                    }
                },
                error: function () {
                },
                dataType: "json" //服务器响应的数据格式
            })

        },
    };
</script>
</body>

</html>